<template>
  <!-- 考试记录 -->
  <div class="app-container">
    <!-- 考试表格 -->
    <el-table v-loading="loading" :data="tableList" :border="true">
      <el-table-column label="课程名称" prop="titleTrain" align="center" />
      <el-table-column label="课程时间" prop="startTimeTrain" align="center" width="180" />
      <el-table-column label="班组名称" prop="shift" align="center" width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="handleTeam(scope.row)" class="active">{{
            scope.row.shift
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试类型" prop="typeVal" align="center" />
      <el-table-column label="考试名称" prop="title" align="center" width="220" />
      <el-table-column label="考试题库" prop="questionCategory" align="center" />
      <el-table-column label="出题方式" align="center" prop="paperType">
        <template slot-scope="scope">
          <span>{{ findPpaperType(scope.row.paperType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试时长" prop="duration" align="center" />
      <el-table-column label="试题数量" prop="questionNum" align="center" />
      <el-table-column label="考试总分" prop="totalScore" align="center" />
      <el-table-column label="及格分数" prop="passLine" align="center" />
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pagesize"
      @pagination="getList"
    />

    <!-- 点击考试人员，显示考试人员列表 -->
    <el-dialog
      title="考试人员列表信息"
      :visible.sync="openperson"
      width="800px"
      append-to-body
    >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出试卷</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出试题</el-button
          >
        </el-col>
      </el-row>

      <!-- 部门、姓名、工种、岗位、成绩、及格（通过/未通过） -->
      <el-table
        v-loading="personLoading"
        :data="personList"
        :border="true"
        max-height="500px"
      >
        <el-table-column v-if="ispeople==1" label="部门" prop="department" align="center" />
        <el-table-column v-if="ispeople==2" label="工作单位" prop="workUnit" align="center" />
        <el-table-column label="工种" prop="workType" align="center" :show-overflow-tooltip="true"/>
        <el-table-column v-if="ispeople == 1" label="岗位" prop="post" align="center" />
        <el-table-column label="成绩" prop="score" align="center" />
        <el-table-column label="及格" prop="achievement" align="center"/>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="100"
        >
          <template slot-scope="scope">
            <!-- "tested": 0 //是否已完成考试 0-未完成 1-已完成 -->
            <el-button 
              size="mini" 
              type="text" 
              v-if="scope.row.tested===1"
              @click="seeTestPaper(scope.row)"
            >查看试卷</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="personTotal > 0"
        :total="personTotal"
        :page.sync="personParams.currentPage"
        :limit.sync="personParams.pagesize"
        @pagination="getPersonList"
      />
    </el-dialog>

    <!-- 查看试卷 -->
    <el-dialog
      title="查看试卷"
      :visible.sync="openTestPaper"
      width="700px"
      append-to-body
      @close="closeSee"
    >
      <div class="checktitle">
        <p>总分：{{ examPaper.totalScore }}</p>
        <p>及格分：{{ examPaper.passLine }}</p>
        <p>所得分：{{ examPaper.score }}</p>
      </div>
      <!-- 单选 -->
      <div class="topickinds" v-if="questionList[0].title != ''">
        <p>{{ questionList[0].title }}</p>
        <div class="topic">
          <div
            v-for="item in questionList[0].children"
            :key="item.theid"
            class="topiclist"
          >
            <div>
              {{ item.subject }}
              <el-radio-group class="option" disabled>
                <el-radio
                  v-for="ele in item.options"
                  :key="ele.val"
                  :value="ele.val"
                  :label="ele.val"
                  >{{ ele.val + ele.title }}</el-radio
                >
              </el-radio-group>
            </div>
            <div class="examineekey">考生答案：{{ item.answerSituation }}</div>
            <div class="rightkey">正确答案：{{ item.answer }}</div>
            <div class="rightkeybg" v-if="item.analysis != ''">
              <div class="analysis">试题解析</div> {{ item.analysis }}
            </div>
          </div>
        </div>
      </div>
      <!-- 多选 -->
      <div class="topickinds" v-if="questionList[1].title != ''">
        <p>{{ questionList[1].title }}</p>
        <div class="topic">
          <div
            v-for="item in questionList[1].children"
            :key="item.theid"
            class="topiclist"
          >
            <div>
              {{ item.subject }}
              <p class="option">
                <el-checkbox-group disabled>
                  <el-checkbox
                    v-for="ele in item.options"
                    :key="ele.val"
                    :label="ele.val"
                    >{{ ele.val + ele.title }}</el-checkbox
                  >
                </el-checkbox-group>
              </p>
            </div>
            <div class="examineekey">考生答案：{{ item.answerSituation }}</div>
            <div class="rightkey">正确答案：{{ item.answer }}</div>
            <div class="rightkeybg" v-if="item.analysis != ''">
              <div class="analysis">试题解析</div> {{ item.analysis }}
            </div>
          </div>
        </div>
      </div>
      <!-- 判断 -->
      <div class="topickinds" v-if="questionList[2].title != ''">
        <p>{{ questionList[2].title }}</p>
        <div class="topic">
          <div
            v-for="item in questionList[2].children"
            :key="item.theid"
            class="topiclist"
          >
            <div>
              {{ item.subject }}
              <el-radio-group class="option" disabled>
                <el-radio
                  v-for="ele in item.options"
                  :key="ele.val"
                  :value="ele.val"
                  :label="ele.val"
                  >{{ ele.val + "、" + ele.title }}</el-radio
                >
              </el-radio-group>
            </div>
            <div class="examineekey">考生答案：{{ item.answerSituation }}</div>
            <div class="rightkey">正确答案：{{ item.answer }}</div>
            <div class="rightkeybg" v-if="item.analysis != ''">
              <div class="analysis">试题解析</div> {{ item.analysis }}
            </div>
          </div>
        </div>
      </div>
      <!-- 填空 -->
      <div class="topickinds" v-if="questionList[3].title != ''">
        <p>{{ questionList[3].title }}</p>
        <div class="topic">
          <div
            v-for="item in questionList[3].children"
            :key="item.theid"
            class="topiclist"
          >
            <div>
              {{ item.subject }}
            </div>
            <div class="examineekey">考生答案：{{ item.answerSituation }}</div>
            <div class="rightkey">正确答案：{{ item.answer }}</div>
            <div class="rightkeybg" v-if="item.analysis != ''">
              <div class="analysis">试题解析</div> {{ item.analysis }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>


    <!-- 导出名单 -->
    <el-dialog :title="title" :visible.sync="open7" append-to-body>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出名单</el-button
      >
      <div
        style="margin-top:30px;margin-bottom:30px;background:#DCDFE6;padding:15px; 0"
      >
        人员名单
      </div>
      <el-form
        ref="form1"
        :model="form1"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item label="培训时间" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="培训时间" />
        </el-form-item>
        <el-form-item label="班组名称" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="班组名称" />
        </el-form-item>
        <el-form-item label="老师" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="老师" />
        </el-form-item>
        <el-form-item label="课程名称" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="课程名称" />
        </el-form-item>
      </el-form>
      <div style="margin-top:30px;background:#DCDFE6;padding:15px; 0">
        名单详情
      </div>
      <el-table v-loading="loading" :data="tableList" :border="true">
        <el-table-column label="工号" prop="userId" align="center" />
        <el-table-column
          label="姓名"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="tableList"
          align="center"
          el-table-column
        />
        <el-table-column label="签到时间" prop="roleSort" align="center" />
        <el-table-column
          label="签字"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 导出成绩表 -->
    <el-dialog :title="title" :visible.sync="open8" append-to-body>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导成绩表</el-button
      >
      <div
        style="margin-top:30px;margin-bottom:30px;background:#DCDFE6;padding:15px; 0"
      >
        个人名单
      </div>
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item label="培训时间" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="培训时间" />
        </el-form-item>
        <el-form-item label="班组机构" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="班组名称" />
        </el-form-item>
        <el-form-item label="培训内容" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="老师" />
        </el-form-item>
        <el-form-item label="培训管理" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="课程名称" />
        </el-form-item>
      </el-form>
      <div style="margin-top:30px;background:#DCDFE6;padding:15px; 0">
        名单详情
      </div>
      <el-table v-loading="loading" :data="tableList" :border="true">
        <el-table-column label="工号" prop="userId" align="center" />
        <el-table-column
          label="姓名"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="tableList"
          align="center"
          el-table-column
        />
        <el-table-column label="学习时长" prop="tableList" align="center" />
        <el-table-column
          label="考核情况"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>

    
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { listData } from "@/api/check/testRecord";
import { getCrewpopel, getExamRecordPaper } from "@/api/check/testRecord";

export default {
  name: "course",
  data() {
    return {
      ispeople: "",
      cateOptions: [], //考试类型
      levelOptions: [], //考试级别
      placeOptions: [], //考试地点
      modeOptions: [], //考试方式
      deptOptions: [], //考试部门

      // table列表数据
      popobj: {
        currentPage: 1,
        pagesize: 3,
        theid: "",
      },
      tableList: [],
      itemData: [],
      testQst: [],
      theid: "",

      // 查询参数
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        taskType: 2,
        category: undefined,
        department: undefined,
        keywords: undefined,
      },
      // -------------------------------------
      issend: true,
      //考试和课程判断状态
      radio: "1",
      // 开始时间
      valuestater: "",
      // 结束时间
      valueend: "",
      // 日期范围
      dateRange: [],
      // 上传图片
      imageUrl: "",

      openTestStat: false, //考试统计
      openTeam: false, //培训班组
      openTestPaper: false, //查看试卷

      testStatForm: {
        name: "111",
      },

      // 显示搜索条件
      showSearch: true,
      /**功能按钮 */
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        openset: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
      /**表格展示 */
      // 遮罩层
      loading: true,
      // 表格数据
      tableList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      /** 弹框部分-------- */
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open3: false,
      open4: false,
      open5: false,
      open6: false,
      open7: false,
      open8: false,
      //表单参数
      form: {
        titlepop: null,
        userName: null,
        deptId: null,
        phonenumber: null,
        picpop: null,
        roleIds: [],
        centlink: null,
        roleSort: null,
      },
      form1: {
        tableList: null,
      },
      form2: {
        tableList: null,
      },
      // 表单校验
      rules: {
        titlepop: [
          { required: true, message: "标题不能为空", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        picpop: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        centlink: [
          { required: true, message: "内容链接不能为空", trigger: "blur" },
        ],
        roleSort: [
          { required: true, message: "序号不能为空", trigger: "blur" },
        ],
        roleIds: [
          // { type:"array",required: true, message: '请至少选择一个角色', trigger: 'change' }
          // { required: true, message: '请至少选择一个角色', trigger: ['blur','change'] }
          { required: true, message: "角色不能为空", trigger: "change" },
        ],
      },
      // 部门树选项
      deptOptions: undefined,
      // 角色选项
      roleOptions: [],
      // 状态数据字典
      statusOptions: [],
      open2: false,
      loading2: true,
      tableList2: [],
      // 发布人员
      openperson: false,
      personLoading: false,
      personParams: {
        currentPage: 1,
        pagesize: 10,
      },
      personTotal: 0,
      personList: [],
      // 查看试卷
      openTestPaper: false, //查看试卷
      examPaper: {},
      questionList: [
        { title: "", children: [] },
        { title: "", children: [] },
        { title: "", children: [] },
        { title: "", children: [] },
      ],
    };
  },
  filters: {
    toArr(data) {
      return data.split("");
    },
  },

  components: {
    Treeselect,
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    getList() {
      this.loading = true;
      listData(this.queryParams).then((res) => {
        this.tableList = res.result.rows;
        this.total = res.result.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 点击班组名称字段
    handleTeam(row) {
      console.log('row---',row)
      this.personParams.theid = row.theid;
      this.openperson = true;
      this.getPersonList()
    },
    getPersonList() {
      this.personLoading = true
      getCrewpopel(this.personParams).then((res) => {
        this.ispeople = res.result.personnelType;
        this.personList = res.result.rows;
        this.personTotal = res.result.total;
        this.personLoading = false
      });
    },

    

    // 班组（考试人员）弹框 -- 查看试卷
    seeTestPaper(row) {
      // "tested": 0 //是否已完成考试 0-未完成 1-已完成
      // "examinationId": 275, //考试记录 id
      const examinationId = row.examinationId;
      getExamRecordPaper(examinationId).then((response) => {
        this.examPaper = response.result;
        let obj = response.result.questionList;

        // let obj = JSON.parse(JSON.stringify(response.result.questionList))
        let questionList = [
          { title: "", children: [] },
          { title: "", children: [] },
          { title: "", children: [] },
          { title: "", children: [] },
        ];
        Object.keys(obj).forEach((key) => {
          if (
            obj[key].title.indexOf("单选题") != -1 &&
            obj[key].children.length > 0
          ) {
            questionList[0] = obj[key];
          } else if (
            obj[key].title.indexOf("多选题") != -1 &&
            obj[key].children.length > 0
          ) {
            questionList[1] = obj[key];
          } else if (
            obj[key].title.indexOf("判断题") != -1 &&
            obj[key].children.length > 0
          ) {
            questionList[2] = obj[key];
          } else if (
            obj[key].title.indexOf("填空题") != -1 &&
            obj[key].children.length > 0
          ) {
            questionList[3] = obj[key];
          }
        });
        this.questionList = questionList;
        this.questionList.forEach((item) => {
          item.children.forEach((item1) => {
            item1.answer = item1.answer.replace(/\|\|\|/g, " ");
            item1.answerSituation = item1.answerSituation.replace(
              /\|\|\|/g,
              " "
            );
          });
        });
        this.openTestPaper = true;
      });
    },
    // 关闭查看试卷
    closeSee() {
      this.examPaper = {};
      this.questionList = [
        { title: "", children: [] },
        { title: "", children: [] },
        { title: "", children: [] },
        { title: "", children: [] },
      ];
    },

    // 导出名单/成绩表
    handleExport() {},
    findPpaperType(val) {
      //试卷类型 1-随机试题 2-固定试题 (出题方式)
      if (val === 1) return "随机试题";
      else if (val === 2) return "固定试题";
    },
  },
};
</script>

<style scoped lang="scss">
// 分割线样式
.el-divider {
  margin: 10px 0;
}
// /deep/
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
h3 {
  background: #f1e9c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  margin-bottom: 10px;
  cursor: pointer;
}
/* .el-date-editor*/
/deep/ .el-dialog__body .el-date-editor.el-input,
/deep/ .el-dialog__body .el-date-editor.el-input__inner {
  // width: 220px;
  width: auto !important;
}

// 查看试题
.topickinds {
  margin-bottom: 20px;
  .topic {
    margin-top: 20px;
    .topiclist {
      margin-top: 20px;
      line-height: 20px;
      input {
        border-bottom: 1px solid;
      }
    }
    .option {
      margin-top: 10px;
    }
  }
}
.judge {
  margin-top: 10px;
}
.checktitle {
  width: 100%;
  display: flex;
  font-size: 15px;
  color: red;
  margin-bottom: 20px;
  border-bottom: 1px solid red;
  padding-bottom: 10px;
  p {
    margin-right: 10%;
  }
}

// 查看试卷  禁用之后样式修改
.topickinds .topic .option {
  display: block;
}
/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: #606266;
  cursor: not-allowed;
}
/deep/ .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #fff;
  border-color: #dcdfe6;
}
/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
  cursor: not-allowed;
}

// 解析样式
.examineekey {
  color: #e12a1a;
  margin-top: 10px;
  font-weight: 600;
  // font-size: 20px;
}
.rightkey {
  color: #0ac23e;
  margin-top: 10px;
  font-weight: 600;
  // font-size: 20px;
}
.rightkeybg {
  /* background: #a9eabb; */
  background: #fbfbfb;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 20px;
  margin-top: 10px;
}
</style>